<template>
  <view class="register-container">
    <view class="register-header">
      <text class="title">参会报名</text>
      <text class="subtitle">REGISTRATION FOR PARTICIPATION</text>
    </view>
    <view class="register-content">
      <view class="form-wrapper">
        <view class="form-item">
          <text class="label">姓名</text>
          <input type="text" placeholder="请输入姓名" class="input" />
        </view>
        <view class="form-item">
          <text class="label">单位</text>
          <input type="text" placeholder="请输入单位名称" class="input" />
        </view>
        <view class="form-item">
          <text class="label">手机</text>
          <input type="number" placeholder="请输入手机号码" class="input" />
        </view>
        <view class="form-item">
          <text class="label">职称</text>
          <input type="text" placeholder="请输入职称" class="input" />
        </view>
        <button class="submit-btn" @tap="handleSubmit">提交报名</button>
      </view>
      
      <view class="tips">
        <text class="tips-title">参会须知：</text>
        <text class="tips-content">1. 报名截止日期为2024年10月15日</text>
        <text class="tips-content">2. 会议注册费1200元/人（含会议资料、餐饮等）</text>
        <text class="tips-content">3. 学生凭有效证件可享受半价优惠</text>
      </view>
      
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
const handleSubmit = () => {
  uni.showToast({
    title: '报名成功',
    icon: 'success'
  })
}
</script>

<style lang="scss">
.register-container {
  min-height: 100vh;
  background-color: #e6f1fc;
  position: relative;
  overflow: hidden;
  
  .register-header {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    padding: 40rpx 32rpx;
    
    .title {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20rpx;
      display: block;
      letter-spacing: 2rpx;
    }
  }
  
  .register-content {
    padding: 24rpx;
    position: relative;
    
    .form-wrapper {
      background: #ffffff;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 2;
      
      .form-item {
        margin-bottom: 24rpx;
        
        .label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          display: block;
          font-weight: 500;
        }
        
        .input {
          width: 100%;
          height: 80rpx;
          border: 1px solid #ccc;
          border-radius: 8rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          background-color: #ffffff;
          box-sizing: border-box;
        }
      }
      
      .submit-btn {
        background: #00866a;
        color: #ffffff;
        border-radius: 40rpx;
        margin-top: 32rpx;
        font-size: 30rpx;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
    
    .tips {
      background: #ffffff;
      border-radius: 12rpx;
      padding: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 2;
      
      .tips-title {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        display: block;
        margin-bottom: 16rpx;
      }
      
      .tips-content {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        display: block;
        margin-bottom: 8rpx;
      }
    }
    
    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      z-index: 1;
      
      &.circle-1 {
        width: 300rpx;
        height: 300rpx;
        background: rgba(0, 134, 106, 0.05);
        top: -120rpx;
        right: -100rpx;
      }
      
      &.circle-2 {
        width: 200rpx;
        height: 200rpx;
        background: rgba(30, 136, 229, 0.05);
        bottom: 80rpx;
        left: -80rpx;
      }
      
      &.circle-3 {
        width: 160rpx;
        height: 160rpx;
        background: rgba(0, 134, 106, 0.08);
        bottom: 200rpx;
        right: -60rpx;
      }
    }
  }
}
</style> 